import React, {  useState, useEffect } from "react"
import { Table, Modal, Card, Button, Space } from "antd"
import { ExclamationCircleOutlined } from "@ant-design/icons"

import Icons from "@/utils/icons"
import Btn from "@/components/linekButton"
// const Btn = lazy(() => import("@/components/linekButton"))
// const Icons = lazy(() => import("@/utils/icons"))
const { confirm } = Modal

export default function User() {
  const [loading, setLoading] = useState(false)

  const columns = [
    {
      title: "账号",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "密码",
      dataIndex: "password",
      key: "password",
    },

    {
      title: "角色",
      dataIndex: "tags",
      key: "tags",
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      width: 150,
      render: (_, record) => {
        return (
          <Space>
            <Btn onClick={() => React.$message("暂无权限，无法编辑", "error")}>
              编辑
            </Btn>
            <Btn onClick={removes}>删除</Btn>
          </Space>
        )
      },
    },
  ]
  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 200)
  }, [])
  const removes = () => {
    confirm({
      title: "是否删除？",
      icon: <ExclamationCircleOutlined />,
      centered: true,
      cancelText: "取消",
      okText: "确定",
      onOk() {
        React.$message("暂无权限，无法删除", "error")
      },
      onCancel() {
        React.$message("未删除", "warn")
      },
    })
  }

  const dataList = [
    {
      id: "1",
      username: "admin",
      password: "123456",
      tags: "系统管理员",
    },
  ]
  return (
    <div>
      <Card
        title="用户管理"
        extra={
          <Button
            type="primary"
            onClick={() => React.$message("无法新增用户", "error")}
          >
            <Icons type="icon-add" />
            新增
          </Button>
        }
      >
        <Table
          rowKey="id"
          loading={loading}
          dataSource={dataList}
          columns={columns.map((item) => {
            const fun = () => ({
              style: {
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              },
            })
            item.onCell = fun
            return item
          })}
        ></Table>
      </Card>
    </div>
  )
}
